<template>

  <div class="chart" id="main" :style="{ width: '450px', height: '450px' }">
  </div>

</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("main") as HTMLDivElement);
  // 绘制图表
  myChart.setOption({
    backgroundColor: '#2c343c',

    title: {
      text: '销售额 / w',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#ccc'
      }
    },

    tooltip: {
      trigger: 'item'
    },

    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
          { value: 335, name: '《无畏之爱》' },
          { value: 310, name: '《梦境守护者》' },
          { value: 274, name: '《山海》' },
          { value: 235, name: '《机器人足球》' },
          { value: 388, name: '《十二生肖》' }
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: 'radius',
        label: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          color: '#c23531',
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },

        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx: any) {
          return Math.random() * 200;
        }
      }
    ]
  })
})


</script>
<style>
.chart {
  /* 高度360 */
  height: 4.5rem;
  background-color: #fff;
}
</style>